<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="../dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="form-group">
              <label for="exampleInputEmail1">姓名</label>
              <input type="email" class="form-control" id="name" v-model="msg">
            </div>
            <div class="form-group">
              <label for="exampleInputPassword1">电话</label>
              <input type="password" class="form-control" id="tel" v-model="tel">
            </div>
            <button type="submit" class="btn btn-info" @click="tt" v-show="xx2">提交</button>
            <button type="submit" class="btn btn-info" @click="xx1(index)" v-show="!xx2">修改</button>
            <button type="submit" class="btn btn-warning" @click="cc">重置</button>
          </div>
          <table class="table table-bordered">
                <tr>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>状态</td>
                </tr>
                <tr v-for="(item,index) in arr">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.tel}}</td>
                    <td>
                        <button type="submit" class="btn btn-danger" @click="ss(index,$event)">删除</button>
                        <button type="submit" class="btn btn-info" @click="xx(index)" >修改</button>
                    </td>
                 
                </tr>
                <tr>
                    <td v-if="arr.length<=0">暂无数据</td>
                </tr>
          </table>
          <div>
            <button type="submit" class="btn btn-danger" v-if="arr.length>=1" @click="qq">全部删除</button>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'',
            tel:'',
            xx2:true,
            index:null,
            arr:[ ]
        },
        methods:{
            //提交
            tt(e){
                var num = this.msg
                 var num1 = this.tel
                //  console.log(num,num1);
                if(num == '' || num1 == ''){
                    alert('不能为空');
                    return;
                }
                 this.arr.push({
                    name:num,tel:num1
                 });
                 this.msg = ''
                 this.tel = ''
            },
            //重置
            cc(){
                this.msg = ''
                 this.tel = ''
            },
            //删除
            ss(index,e){
                // console.log(e.target);
                this.arr.splice(index,1)
            },
            //修改
            xx(index){
                this.xx2 = false;
                this.index = index;
                // var abc = this.arr[this.index].name
                  this.msg = this.arr[this.index].name
                  this.tel = this.arr[this.index].tel
                // console.log(abc);
                // console.log(index);
            },
            //全部删除
            qq(e){
                this.arr = []
            },
            xx1(index){
                // console.log(index);
                this.index = index;
                 this.arr[this.index].name = this.msg 
                 this.arr[this.index].tel =this.tel ;
                 this.xx2 = true;
                 this.msg = ''
                 this.tel = ''
            }
        },
    })
</script>
</html>